@padding-top-bottom: 6px;
@height: 28px;
@width: 220px;
@icon-size: 24px;

.range-selector {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: rgb(var(--grey-600));

    // padding: 0 var(--padding-sm) 0 var(--padding-base);

    border: 1px solid rgb(var(--border-color));
    border-radius: var(--border-radius-base);

    width: @width;
    height: @height;

    &-editor {
        position: relative;
        user-select: none;
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
    }

    &-icon {
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;

        width: @icon-size;
        height: @icon-size;
        padding: 0;

        margin-right: 4px;

        font-size: var(--font-size-lg);
        color: rgb(var(--text-color));

        background-color: transparent;
        border: none;
        border-radius: var(--border-radius-base);
        outline: none;

        &:not([disabled]):hover {
            background-color: rgb(var(--grey-100));
        }

        &[disabled] {
            cursor: not-allowed;
            color: rgb(var(--grey-200));
        }
    }

    &:hover {
        border-color: rgb(var(--hyacinth-500));
    }

    &-active {
        border-color: rgb(var(--hyacinth-500));

        .range-selector-icon {
            color: rgb(var(--hyacinth-500));
        }
    }

    &-error {
        border-color: rgb(var(--red-400));

        .range-selector-icon {
            color: rgb(var(--red-400));
        }

        &:hover {
            border-color: rgb(var(--red-400));
        }
    }

    &-disabled {
        border-color: rgb(var(--grey-100));

        .range-selector-icon {
            color: rgb(var(--grey-100));
        }

        &:hover {
            border-color: rgb(var(--grey-100));
        }
    }
}

.range-selector-modal {
    position: relative;

    max-height: 500px;

    overflow: hidden;

    overflow-y: auto;

    &-container {
        display: flex;
        flex-direction: row;
        // justify-content: center;
        align-items: center;

        margin-bottom: 10px;

        &-input {
            display: inline-block;
            width: 280px;

            &-active {
                border-color: rgb(var(--hyacinth-500));
            }
        }

        &-button {
            display: inline-block;
            text-align: center;
            width: 28px;

            &:hover {
                cursor: pointer;
                color: rgb(var(--hyacinth-500));
            }
        }
        &-delete-button {
            margin: auto;
        }
    }

    &-add {
        position: relative;
        width: 300px;
        margin-top: 5px;
        text-align: left;
        color: rgb(var(--hyacinth-500));
        font-size: var(--font-size-xs);
        & &-button {
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
                cursor: pointer;
                background-color: rgb(var(--hyacinth-500), 0.05);
            }
        }
    }
}
